<template>
	<view class="content">
		<view class="sticky">
			<view class="tab">
				<view :class="curIndex==index?'tab-item sel-tab':'tab-item'" @click="selTab(item,index)"
					v-for="(item,index) in menu" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="date">
				<span>更新时间：{{updateTime?updateTime:"--"}}</span>
			</view>
		</view>
		<view class="head">
			<view class="head-col" :style="headStyle(item)" v-for="(item,index) in headColumns" :key="index">
				<text class="">
					{{item.name}}
				</text>
			</view>
		</view>
		<scroll-view scroll-x scroll-y enable-flex
			style="width: 100%;height: calc(100vh - 135px);box-sizing: border-box;overflow:auto;"
			@scrolltolower="onScrollToLower" lower-threshold="50">
			<view v-if="list.length>0" class="main">
				<view class="main-row" v-for="(j,jIndex) in list" :key="jIndex">
					<view class="main-row-col" :style="headStyle(item,index)" v-for="(item,index) in headColumns"
						:key="index">
						<text v-if="item.propsSec" class="sec-props">
							{{j[item.propsSec]}}
						</text>
						<view v-if="index===1||index===3" :style="{'text-align':'right'}"
							:class="setClass(item,index,jIndex)" class="col1" @click="rowClick(item,index,j)">
							{{j[item.props]?j[item.props]:'-'}}
						</view>
						<view v-else-if="index===2||index===4" :class="setClass(item,index,jIndex)" class="col2"
							@click="rowClick(item,index,j)">
							<view :class="{'col2-txt':true,red:(j[item.props]>0?true:false)}">
								{{j[item.props]>0?'有货':'无货'}}
							</view>
						</view>
						<text v-else>
							{{j[item.props]?j[item.props]:'-'}}
						</text>
					</view>
				</view>
				<view v-if="loading" class="loading">加载中...</view>
				<view v-if="page.pageIndex>=totalPages-1" class="loading">没有更多数据了</view>
			</view>
			<view v-else-if="!loading&&list.length==0" class="empty">
				<van-empty description="暂无数据" />
			</view>
		</scroll-view>
	</view>
	<float-drag></float-drag>
</template>

<script>
	import {
		getQuoteHome,
		getQuoteData,
		getUserExistCode,
		getHomeMy
	} from '@/common/api.js'
	import toolMarket from './util.js'
	import FloatDrag from '../../components/float-drag.vue'
	export default {
		name: 'Market',
		components: {
			'float-drag': FloatDrag
		},
		data() {
			return {
				menu: [],
				curIndex: 0,
				updateTime: null,
				headColumns: [],
				list: [],
				menuId: 0,
				page: {
					pageIndex: 0,
					pageSize: 20
				},
				totalPages: 0,
				loading: false,
				isLogin: false,
				authCode: '',
			}
		},
		computed: {
			colWidthTotal() {
				let arr = this.headColumns.map(i => +i.minWidth)
				let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
				return sum
			}
		},
		onShow() {
			this.isLogin = uni.getStorageSync('openId') ? true : false
			console.log(111, this.isLogin)
			if (!this.isLogin) {
				this.login()
			} else {
				this.getHomeMyData()
			}
		},
		onLoad() {
			this.headColumns = toolMarket.headColumns
			this.init()
		},
		onPullDownRefresh() {
			console.log(1)
			this.init()
			setTimeout(() => {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			console.log('底部')
		},
		methods: {
			/* 登录 */
			login() {
				// const accountInfo = uni.getAccountInfoSync()
				uni.login({
					// onlyAuthorize: true,
					provider: 'weixin',
					success: (loginRes) => {
						this.authCode = loginRes.code
						console.log('loginRes', this.authCode)
					}
				});
			},
			async init() {
				this.page.pageIndex = 0
				this.page.pageSize = 20
				this.list = []
				await this.getTabList()
				this.getList()
			},
			async getTabList() {
				const res = await getQuoteHome()
				console.log(res)
				this.menu = res.dataMenu
				this.updateTime = res.quotes.updateTime
				// this.list = res.quotes.data
				this.menuId = this.menu[0].id
				this.curIndex = 0
				console.log(this.list)
			},
			selTab(item, index) {
				if (this.curIndex === index) return
				this.curIndex = index
				this.menuId = item.id
				this.page.pageIndex = 0
				this.page.pageSize = 20
				this.list = []
				this.getList()
			},
			async getList() {
				this.loading = true
				let params = {
					menuId: this.menuId,
					pageIndex: this.page.pageIndex,
					pageSize: this.page.pageSize
				}
				const res = await getQuoteData(params)
				console.log(res)
				if (res.data) {
					this.list.push(...res.data)
				}
				this.updateTime = res.updateTime
				this.totalPages = res.totalPages
				this.loading = false
			},
			headStyle(val, index) {
				let obj = {
					'min-width': `${val.minWidth}px`,
					'width': `${(val.minWidth*100)/this.colWidthTotal}%`,
					'text-align': `${val.align?val.align:'left'}`,
					'color': `${val.color?val.color:'#000'}`,
					'padding-right': index === 2 || index === 4 ? '8px' : 0
				}
				return obj
			},
			setClass(val, index, jIndex) {
				if (jIndex % 2 != 1) {
					return 'bg1'
				}
			},
			onScrollToLower(event) {
				if (event.detail.direction === 'bottom' && this.list.length > 0 && !this.loading) {
					if (this.page.pageIndex >= this.totalPages - 1) return
					this.page.pageIndex++
					this.getList()
				}
			},
			/* 点击查看价格明细 */
			async rowClick(row, index, j) {
				console.log('openid2', getApp().globalData.openId)
				console.log('openid3', uni.getStorageSync('openId'))
				if (!this.isLogin) {
					console.log('menu', this.authCode)
					const res = await getUserExistCode({
						code: this.authCode
					});
					console.log('openid1', res)
					if (res && res.openId) {
						getApp().globalData.sessionKey = res.sessionKey
						getApp().globalData.openId = res.openId
						console.log(res)
						if (!res.isLogined) {
							return uni.navigateTo({
								url: `../login/index`
							});
						} else {
							uni.setStorageSync('openId', res.openId)
						}
					}
				}
				let option = j
				let type = 1
				console.log(index)
				if (index == 1 || index == 2) {
					type = 1
					console.log(index)
					// if(!j.meter1)return
					if(j.pieces1===0){
						return uni.showToast({
									title: '暂时无货',
									icon: 'none',
								})
					}
				}
				if (index == 3 || index == 4) {
					type = 2
					if(j.pieces2===0){
						return uni.showToast({
									title: '暂时无货',
									icon: 'none',
								})
					}
				}
				let curMenu = this.menu.find(i => i.id == this.menuId)
				uni.navigateTo({
					url: `../market/priceDetail?priceDetail=${JSON.stringify(option)}&type=${type}&curMenu=${JSON.stringify(curMenu)}`
				});
			},
			async getHomeMyData() {
				const res = await getHomeMy()
				if (res.data.contract) {
					getApp().globalData.Tel_Phone = res.data.contract
					if (res.data.nickName) {
						getApp().globalData.Nick_Name = res.data.nickName
					}
					if (res.data.avatar) {
						getApp().globalData.Avatar = `${getApp().globalData.ImgAvatarDomain}${res.data.avatar}`
					}
				}
			},

		},
		onShareAppMessage() {
			return {
				title: '钢价通',
				path: 'pages/market/index',
			}
		},
		onShareTimeline() {
			return {
				title: '钢价通',
				path: 'pages/market/index',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.sticky {
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			/* z-index: 999; */
			.tab {
				display: flex;
				flex-wrap: nowrap;
				overflow: hidden;
				overflow-x: auto;
				white-space: nowrap;
				background-color: #ececec;
				color: #000000;
				font-size: 30rpx;
				height: 45px;
				line-height: 45px;

				.tab-item {
					padding: 0 25rpx;
				}

				.sel-tab {
					background-color: #fff;
					color: #0749e4;
				}
			}

			.date {
				height: 45px;
				line-height: 45px;
				font-size: 13px;
				color: #a8a8a8;
				padding: 0 10px;
				box-sizing: border-box;
				border-bottom: 1px solid #ececec;
			}
		}

		// list{
		// 	width: 100%;
		// 	height: calc(100vh - 90px);
		// }
		.head {
			font-size: 15px;
			display: flex;
			align-content: center;
			flex-wrap: nowrap;
			// position: fixed;
			// top: 90px;
			// z-index: 100;

			&-col {
				height: 45px;
				line-height: 45px;
				background-color: #fff;
			}
		}

		.main {
			font-size: 15px;
			// padding-top: 45px;

			&-row {
				display: flex;
				align-content: center;
				flex-wrap: nowrap;
				box-sizing: border-box;

				&-col {
					height: 45px;
					line-height: 45px;
					position: relative;
					box-sizing: border-box;

					.sec-props {
						font-size: 13px;
						position: absolute;
						left: 5px;
						top: 0;
						bottom: 0;
					}
				}
			}
		}

		.empty {
			padding-top: 45px;
			box-sizing: border-box;
			height: calc(100vh - 135px);
			text-align: center;
			color: #a8a8a8;
			font-size: 14px;
		}
	}

	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.loading {
		height: 45px;
		line-height: 45px;
		width: 100%;
		text-align: center;
		color: #a8a8a8;
	}

	.col1 {
		border-left: 1px solid #ececec;
		border-top: 1px solid #ececec;
		border-bottom: 1px solid #ececec;
		box-sizing: border-box;
		padding: 0 5px;
	}

	.col2 {
		width: 100%;
		height: 100%;
		border-right: 1px solid #ececec;
		border-top: 1px solid #ececec;
		border-bottom: 1px solid #ececec;
		display: flex;
		align-items: center;
		justify-content: center;
		&-txt{
			height: 25px;
			line-height: 25px;
			width: 50px;
			border: 1px solid #17b03e;
			border-radius: 5px;
			color: #17b03e;
		}
		.red{
			color: #fff;
			border: 1px solid #e93d3d;
			background-color: #e93d3d;
		}
	}

	.bg1 {
		background-color: #ececec;
		// border-top: 1px solid #ececec;
		// border-bottom: 1px solid #ececec;
		// border-radius: 4px;
	}
</style>